<template>
  <div class="mark">
    <div
      class="element"
      @touchmove.stop="item.isFinish?null:move($event)"
      @touchstart.stop="item.isFinish?null:start($event)"
      @touchend.stop="item.isFinish?null:end($event)"
      :style="elementStyle"
    >{{item.assignmentName}}</div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  props: ["item", "index","questionIndex"],
  data() {
    return {
      x: 0,
      y: 0,
      moveX: 0,
      moveY: 0,
      transition: "all .5s",
      elementLos: false
    }
  },
  computed: {
    //任务角色
    assinmentRole() {
      return this.item.articles.filter(item => { return item.name === this.item.assignmentName })[0]
    },
    elementStyle() {
      return {
        transition: this.transition,
        transform: "translate3d(" + this.moveX + "px," + this.moveY + "px,0px)",
        filter: this.item.isFinish ? "grayscale(0)" : "grayscale(1)"
      }
    }
  },
  methods: {
    pointTouch: function () {
      this.touchMusic()
      this.pointExplainShow = !this.pointExplainShow
    },
    start: function (event) {
      this.y = event.changedTouches[0].clientY
      this.x = event.changedTouches[0].clientX
    },
    move: function (event) {
      this.transition = "all 0s"
      this.moveX = event.changedTouches[0].clientX - this.x
      this.moveY = event.changedTouches[0].clientY - this.y
    },
    end: function (event) {
      let minX = parseFloat(this.assinmentRole.left) / 100,
        minY = parseFloat(this.assinmentRole.top) / 100,
        maxX = minX + parseFloat(this.assinmentRole.width) / 100,
        maxY = minY + parseFloat(this.assinmentRole.height) / 100,
        clientX = (event.changedTouches[0].clientX + (this.mainWidth - this.windowWidth) / 2) / this.mainWidth,
        clientY = (event.changedTouches[0].clientY + (this.mainHeight - this.windowHeight) / 2) / this.mainHeight
      if (clientX >= minX && clientX <= maxX && clientY >= minY && clientY <= maxY) {
        this.sucMusic()
        this.moveX = 0
        this.moveY = 0
        this.transition = "all 0.5s"
        this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
        this.addAnswer({
          id: this.item.id,
          type: true
        })
      }
      else {
        this.losMusic()
        this.moveX = 0
        this.moveY = 0
        this.transition = "all 0.5s"
        this.addAnswer({
          id: this.item.id,
          type: false
        })
      }
    },
    ...mapActions("assignmentStatus", ["updateAssignmentFinish"])
  }
}
</script>

<style scoped lang='stylus'>
.mark
  $coord('WHRB', 5.1rem, 2.2rem, 1.5rem, 1rem)
  border 0.15rem dashed white
  box-sizing border-box
  border-radius 1rem 0.2rem 1rem 0.2rem
  transform translate3d(var(--X), var(--Y), 0)
  z-index 99
  .element
    $coord('WHLT', 5.2rem, 2.3rem, -0.21rem, -0.2rem)
    background linear-gradient(top, rgb(249, 174, 149), rgb(253, 128, 89))
    border 0.15rem solid white
    box-sizing border-box
    border-radius 1rem 0.2rem 1rem 0.2rem
    $alignCenter()
    font-size 0.95rem
    color white
    font-weight 700
    text-shadow 2px 2px 5px rgb(243, 125, 83)
    z-index 99
</style>
